<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流信息查询</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div class="layui-row">
        <ul class="nav layui-nav lay-filter='' layui-col-md12">
            <li class="layui-nav-item layui-this"><a href="">首页</a></li>
            <li class="layui-nav-item"><a href="support.html">支持物流</a></li>
            <li class="layui-nav-item"><a href="about.html">关于小站</a></li>
        </ul>

        <div class="layui-col-md12">
            <div class="panel layui-panel">
                <i class="layui-icon layui-icon-about"></i>
                <span>注意:查询时只需填写物流单号即可</span>
                <hr>
                <form class="layui-form" onsubmit="return false">
                    <div class="layui-form-item">
                        <label id="label-nu" class="layui-form-label">物流单号:</label>
                        <div id="input_one" class="layui-input-block">
                            <input type="text" id="nu" required lay-verify="required" placeholder="请输入查询单号"
                                autocomplete="off" class="layui-input" style="width: 200px;">
                        </div>
                        <div id="button-box">
                            <button id="submit" class="layui-btn" onclick="search()">立即查询</button>
                            <button class="layui-btn layui-btn-warm">重置内容</button>
                        </div>
                    </div>
                </form>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>物流详情</legend>
                </fieldset>
                <ul class="layui-timeline" id="detail">
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title"></h3>
                            <p>
                                请输入运单号查询!
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    // 初次访问操作
    let t = new Date();
    let Year = t.getFullYear();
    let month = t.getMonth();
    let day = t.getDay();
    time = Year + '年' + month + '月' + day + '日';
    $('.layui-timeline-title').text(time);
    // 查询物流
    function search() {
        $('#detail').empty('li');
        let nu = $('#nu').val();
        if (nu === '') {
            return false;
        }
        let url = "getexpress.php";
        $.ajax({
            type: "get",
            url: url,
            data: {
                "nu": nu
            },
            dataType: 'json',
            //ajax请求之前
            beforeSend: function () {
                loadIndex = layer.load();
            },
            complete: function () {
                layer.close(loadIndex);
            },
            success: function (data) {
                // alert(data.status);
                // return false;
                if (data.status) {
                    layer.alert('查询成功!' + '<br>' + '物流公司: ' + data.company + '<br>' + '物流状态: ' + data.current, {
                        icon: 1,
                        time: 1 * 1000
                    });
                    for (let i = 0; i < data.context.length; i++) {
                        // 物流动态
                        let desc = data.context[i].desc;
                        // 物流时间
                        let time = DateToTime(data.context[i].time, "Y-m-d H:i:s");
                        // $('#detail').html('');
                        let html = '                    <li class="layui-timeline-item">\n' +
                            '                        <i class="layui-icon layui-timeline-axis"></i>\n' +
                            '                        <div class="layui-timeline-content layui-text">\n' +
                            '                            <h3 class="layui-timeline-title">' + time + '</h3>\n' +
                            '                            <p>\n' +
                            '                                ' + desc + '\n' +
                            '                            </p>\n' +
                            '                        </div>\n' +
                            '                    </li>';
                        $("#detail").append(html);
                    }

                } else {
                    layer.alert('查询失败,请重新尝试', {
                        icon: 2,
                        time: 2 * 1000
                    });

                }
            },
            error: function (data) {
                layer.alert('接口异常', {
                    icon: 2,
                    time: 2 * 1000
                });
            }
        })
    }
    // 时间格式化
    function DateToTime(unixTime, type = "Y-M-D H:i:s") {
        var date = new Date(unixTime * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var datetime = "";
        datetime += date.getFullYear() + type.substring(1, 2);
        datetime += (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + type.substring(3, 4);
        datetime += (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        if (type.substring(5, 6)) {
            if (type.substring(5, 6).charCodeAt() > 255) {
                datetime += type.substring(5, 6);
                if (type.substring(7, 8)) {
                    datetime += " " + (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
                    if (type.substring(9, 10)) {
                        datetime += type.substring(8, 9) + (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                        if (type.substring(11, 12)) {
                            datetime += type.substring(10, 11) + (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                        };
                    };
                };
            } else {
                datetime += " " + (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
                if (type.substring(8, 9)) {
                    datetime += type.substring(7, 8) + (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                    if (type.substring(10, 11)) {
                        datetime += type.substring(9, 10) + (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                    };
                };
            };
        };
        return datetime;
    }
</script>

</html>